@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin swiperMain ($width,$height,$transform:0.8) {
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-wrapper{overflow: hidden}

  .swiper-container img {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    width: $width+px;
    height: $height+px;
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: 300ms;
    transform: scale($transform);
  }

  .swiper-slide-active, .swiper-slide-duplicate-active {
    transform: scale(1);
  }
  .swiper-pagination{
    position: relative;bottom: 0;padding-top: 20px;
    font-size:16px;
    font-family:DINAlternate-Bold,DINAlternate;
    font-weight:bold;
    .swiper-pagination-total{color: rgba(175, 180, 202, 1)}
  }
  .img {
    width: $width+px;
    height: $height+px;
  }
}

@mixin indexTitle {
  .index-common-hd {
    margin-bottom: 10px;
    transform: scaleX(.8);
    letter-spacing: 0;
  }

  .second-title {
    color: rgba(0, 0, 0, 1);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    margin: 0 auto 30px auto;
  }
}
